<template>
    <div class="app-container">
        <div class="filter-head">
            <div class="filter-item">
                <el-select v-model="listQuery.city_id" placeholder="请选择城市" filterable  :disabled="listQuery.city_id ? false : true">
                    <el-option :label="item.label" :value="item.value" v-for="item, index in cityList" :key="index" />
                </el-select>
                
            </div>
            <div class="filter-item">
                <el-input v-model="listQuery.hotel_name" placeholder="请输入母酒店名称" clearable />
            </div>

            <div class="filter-item">
                <el-button icon="el-icon-search" :loading="listLoading" type="primary"
                    @click="handleFilter">搜索</el-button>
            </div>
        </div>

        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="listLoading">
                <el-table-column type="index" width="50" align="center" label="序号">
                </el-table-column>

                <!-- <el-table-column prop="id" label="供应商ID" align="center">
                </el-table-column> -->

                <el-table-column prop="cityName" label="城市" align="center" width="200px">
                </el-table-column>

                <el-table-column prop="hotelName" label="母酒店名称" align="center">
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.limit" :total="total" background
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>

<script>
import { getAllCityList, getMotherHotelList } from '@/api/hotel'
export default {
    data() {
        return {
            listQuery: {
                page: 1,
                limit: 10,
                city_id: '',
                hotel_name: ''
            },
            total: 0,
            tableData: [],
            cityList: [],
            listLoading:false,
        };
    },
    async created() {
        await this.getCityList();
        await this.getList();
    },
    mounted() {
    },
    methods: {
        async getList() {
            this.listLoading = true
            console.log(this.listQuery)
            let res = await getMotherHotelList(this.listQuery)
            if(res.code === 0){
                this.tableData = res.data.items
                this.total = res.data.total                
            }
            this.listLoading = false
        },
        async getCityList(){
            this.listLoading = true
            let res = await getAllCityList()
            if(res.code === 0){
                this.cityList = res.data.map((item,index) => {
                    return { label: item.city_name, value: item.city_id };
                });
                this.listQuery.city_id = this.cityList[0].value;
                console.log("🚀 ~ getCityList ~ this.listQuery.city :", this.listQuery.city )
                
            }
        },
        handleFilter(){
            console.log(this.listQuery)
            this.listQuery.page = 1
            this.getList();
        },
        handleSizeChange(val){
            this.listQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val){
            this.listQuery.page = val;
            this.getList();
        }
    },
};
</script>
<style lang="scss" scoped>
.filter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    &>.filter-item {
        margin: 5px;
    }
}
.table{
    margin-top: 10px;
}
</style>
